<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多图片上传</title>
</head>
<body>
    <div style="width:160px; height: 100px;">
        <h3>这里显示是远程图片</h3>
        <div class="img-boxs" style="display:flex;flex-direction:column;">
        </div>
    </div>
    <div class="app" style="width: 100vw;height: 100vh;">
        <form id="form" enctype="multipart/form-data" style="width:400px; height:300px;border:1px solid #ffffff; margin: 0 auto;">
            <input id="inputDom" type="file" accept="image/png,image/jpg,image/jpeg" multiple="multiple" name="header">
            <input id="commit" type="button" value="提交">
            <div style="margin-top: 10px;">
                <img style="width:100%" id="view" src="">
            </div>
        </form>
    </div>

    <script>
        /**
         * 请使用 原生js 实现 图片上传的功能
         *  - 图片大小不能超过 200k
         */
        ((document)=>{
            const upLoadUrl = "http:localhost:8999/upload/images";
            const commitDom = document.getElementById("commit");
            const formDom = document.getElementById("form");
            const inputDom = document.getElementById("inputDom");
            const viewDom = document.getElementById("view");
            const imgBoxs = document.querySelector(".img-boxs");
            let checked = false;

            function init() {
                inputDom.addEventListener("change", e =>{
                    if (formDom[0].files.length > 0) {
                        checked = true;
                    }
                    upload();
                })
                commitDom.addEventListener("click", upload);
            }


            function upload() {
                if (!checked) {
                    alert("不满足上传");
                    return
                }
                // 组装数据formData 发送请求。
                const formDate = new FormData();
                const files = formDom[0].files;
                for (let i = 0; i < files.length; i++) {
                    formDate.append("file", files[i]);
                }
                ajaxUpload(upLoadUrl, formDate)
            }

            function renderImages(urls) {
                if (urls.length > 0) {
                    let temp;
                    urls.forEach(url => {
                        temp = document.createElement("img");
                        temp.src = url;
                        imgBoxs.appendChild(temp);
                    })
                    temp = null;
                }
            }

            /**
             * ie7+
             * @param success
             * @param fail
             */
            function ajaxUpload(url, formData) {
                if (!url || !formData) {
                    console.log("not send...")
                    return;
                }
                const xhr = new XMLHttpRequest(); // ie7+
                xhr.open("POST", url, true);
                xhr.send(formData);
                xhr.onreadystatechange = function() {
                    // 发送完成
                    if (xhr.readyState === 4) {
                        console.log(xhr.status);
                        if ((xhr.status >= 200 && xhr.status <300) || xhr.status === 304) {
                            const res = JSON.parse(xhr.responseText)
                            alert(res.message);
                            console.log(res);
                            // 回显远程的图片
                            renderImages(res.data.urls);
                        } else {
                            // 服务器返回异常
                            console.log("请求失败,返回异常: ", xhr.responseText);
                        }
                    }
                }
            }

            init();
        })(document);
    </script>
</body>
</html>